<template>
    <div class="region-white tableBox">
        <div class="titleBox">
            <div v-if="$slots.title" class="custom">
                <slot name="title"></slot>
            </div>
            <span v-else class="fl title-name">{{ titleText }}</span>
            <span v-if="tips" class="tips">{{ tips }}</span>
            <div class="fr">
                <slot name="titleBtn"></slot>
            </div>
        </div>
        <div v-if="$slots.search" class="searchBox">
            <slot name="search"></slot>
        </div>
        <div v-if="$slots.btn" class="btnBox">
            <slot name="btn"></slot>
        </div>
        <div v-if="$slots.default" class="mainBox">
            <slot></slot>
        </div>
        <div v-if="!hidePagination" class="paginationBox">
            <div v-if="$slots.pagination">
                <slot name="pagination"></slot>
            </div>
            <el-pagination
                v-else
                class="fr"
                layout="total, sizes, prev, pager, next, jumper"
                background
                :current-page="page"
                :page-size="pageSize"
                :total="pageTotal"
                :pager-count="pagerCount"
                :page-sizes="pageSizes"
                @size-change="onPageChange($event, 'size')"
                @current-change="onPageChange($event, 'page')"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
/**
 * @description 表格组件
 * 该组件建议配合 ./mixins/loadList.js 一起使用
 * search插槽：若使用 el-form 作为查询组件，默认请使用 label-width="90px"
 *      若需调整 label-width 的宽度，对应使用的带 .el-input 和 .el-date-editor 样式的组件请添加样式控制宽度，如 el-input组件 和 el-date-picker组件
 *      宽度公式如右：(el-input宽度 + label-width宽度) * 2 = el-date-editor宽度 + label-width宽度
 * pagination插槽：若使用默认插槽请务必传入 :page，:page-size，:page-total，@page-change，否则可不传
 *
 * @description props参数
 * @param {string} title - 标题，不填默认显示页面title
 * @param {string} tips - 标题提示文案
 * @param {number} page - 当前页数
 * @param {number} pageSize - 每页显示条目个数
 * @param {number} pageTotal - 总条目数
 * @param {number} pagerCount - 页码按钮的数量，当总页数超过该值时会折叠，大于等于 5 且小于等于 21 的奇数
 * @param {array} pageSizes - 每页显示个数选择器的选项设置
 * @param {boolean} hidePagination - 是否隐藏分页插槽
 *
 * @description 可用插槽
 * @param title - 标题组，若没有显示 :title 相关信息
 * @param titleBtn - 标题组右侧查询组，可插入查询块
 * @param search - 查询组，可插入条件查询块
 * @param btn - 按钮组，可插入相关按钮，如查询，下载等
 * @param default - 表格组，默认插槽
 * @param pagination - 分页组，存在默认样式，可自定义
 *
 * @example
 * <view-table :page="page" :page-size="pageSize" :page-total="tableData.pagination.total" @page-change="onPageChange"></view-table>
 */
export default {
    name: "view-table",
    props: {
        title: {
            type: String,
            default: "",
        },
        tips: {
            type: String,
            default: "",
        },
        page: {
            type: Number,
            default: 1,
        },
        pageSize: {
            type: Number,
            default: 10,
        },
        pageTotal: {
            type: Number | null,
            default: null,
        },
        pagerCount: {
            type: Number,
            default: 5,
        },
        pageSizes: {
            type: Array,
            default: () => [5, 10, 20, 30, 50],
        },
        hidePagination: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        // 若未设置标题，使用页面title
        titleText() {
            return this.title || this.$route.meta.title;
        },
    },
    methods: {
        onPageChange($event, type) {
            if (this.$listeners["pageChange"]) {
                this.$emit("pageChange", $event, type);
            } else {
                console.log("未定义【pageChange】方法");
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import url("~@assets/css/public.less");
.tableBox {
    margin-bottom: 15px;
    .titleBox {
        padding: 15px;
        border-bottom: 1px solid @border;
        overflow: hidden;
        .custom {
            float: left;
            line-height: 28px;
        }
        .tips {
            float: left;
            margin-left: 15px;
            line-height: 28px;
            font-size: 14px;
            color: @lightGrey;
        }
    }
    .searchBox {
        margin-top: 8px;
        padding: 0 15px;
        overflow: hidden;
        ::v-deep .el-form-item {
            float: left;
            margin: 12px 0 0;
        }
        ::v-deep .el-input {
            width: 170px;
        }
        ::v-deep .el-date-editor {
            width: 430px;
        }
    }
    .btnBox {
        margin-top: 20px;
        padding: 0 15px;
    }
    .mainBox {
        margin-top: 20px;
        padding: 0 15px;
    }
    .paginationBox {
        margin: 20px 0;
        padding: 0 15px;
        overflow: hidden;
    }
}
</style>